<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="addBtn">添 加</el-button>
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
    <el-form label-width="120px" ref="formRef" :rules="rules">
      <el-form-item label="菜单标题" prop="title">
        <el-input v-model="formModel.title" />
      </el-form-item>
      <el-form-item label="路由名称" prop="component">
        <el-input v-model="formModel.component" />
      </el-form-item>
      <el-form-item label="排序" prop="sortValue">
        <el-input v-model="formModel.sortValue" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formModel.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitBtn">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-table
    :data="list"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    default-expand-all
  >
    <el-table-column prop="title" label="菜单标题" />
    <el-table-column prop="component" label="路由名称" />
    <el-table-column prop="sortValue" label="排序" />
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        {{ scope.row.status == '1' ? '正常' : '停用' }}
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />

    <el-table-column label="操作" align="center" width="280">
      <template #default="scope">
        <el-button type="success" size="small" @click="addBtn(scope.row)">
          添加下级节点
        </el-button>
        <el-button type="primary" size="small" @click="editBtn(scope.row)">
          修改
        </el-button>
        <el-button type="danger" size="small" @click="deleteBtn(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
//引入调用的方法
import { ref, onMounted, reactive, nextTick } from 'vue'
import { getMenuList, addMenu, editMenu, deleteMenu } from '@/api/sysMenu.js'
import { ElMessage, ElMessageBox } from 'element-plus'

// 定义表格数据模型
const list = ref([])
//定义操作类型
const type = ref('0') //0-添加 1-修改
//表单对象
const formRef = ref()
// 定义添加表单菜单表单相关数据模型
const dialogTitle = ref('添加')
const dialogVisible = ref(false)

//页面表单数据
const formModel = reactive({
  id: '',
  parentId: 0,
  title: '',
  url: '',
  component: '',
  icon: '',
  sortValue: 1,
  status: 1,
})
//定义表单验证规则
const rules = reactive({
  title: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  component: [
    { required: true, message: '请输入组件名称', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  sortValue: [
    { required: true, message: '请输入排序值', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
})
//获取菜单列表
const getMenu = async () => {
  const res = await getMenuList()
  if (res.code === 200 && res) {
    list.value = res.data
  }
}
//添加按钮
const addBtn = async row => {
  type.value = '0'
  dialogVisible.value = true
  // 立即清空 formModel
  // 设置正确的默认值，符合校验规则
  Object.assign(formModel, {
    id: '',
    parentId: row?.id || 0,
    title: '',
    url: '',
    component: '',
    icon: '',
    sortValue: 1, // 使用数字默认值
    status: 1, // 使用数字默认值
  })
  if (!row.id) {
    dialogTitle.value = '添加'
  } else {
    dialogTitle.value = '添加下级节点'
    formModel.parentId = row.id
  }
}
//修改按钮
const editBtn = async row => {
  type.value = '1'
  dialogVisible.value = true
  dialogTitle.value = '修改'
  Object.assign(formModel, row)
}
//删除按钮
const deleteBtn = async row => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code, message } = await deleteMenu(row.id)
    if (code === 200) {
      ElMessage.success('删除成功')
      dialogVisible.value = false
      getMenu()
    } else {
      ElMessage.error(message)
    }
  })
}
//提交按钮
const submitBtn = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    let res = null
    if (type.value === '0') {
      res = await addMenu(formModel)
    } else {
      res = await editMenu(formModel)
    }

    if (res.code === 200 && res) {
      ElMessage.success(res.message)
      dialogVisible.value = false
      getMenu()
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}
onMounted(() => {
  getMenu()
})
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>